<template>
	<view class="content-box" @touchmove.prevent>
		<view class="">
			得分：{{sum}}
		</view>
		<game-box v-if="isDone" ref="gameContentBox" :col="5" :initArr="initArr" @getSum="getSum"></game-box>
		<view v-show="!isDone" class="loading"></view>
		<view class="stage-prop">
			<view class="propsClass" @click="backspace">
				<uni-icons type="undo" size="30"></uni-icons>
				<text>撤回</text>
			</view>
			<!-- <view class="propsClass">
				<uni-icons type="undo" size="30"></uni-icons>
				<text>撤回</text>
			</view> -->
			<view class="propsClass" @click="saveArr">
				<uni-icons type="compose" size="30"></uni-icons>
				<text>保存</text>
			</view>
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		inject,
		onBeforeMount
	} from "vue";
	import {
		onReady,
		onShow
	} from "@dcloudio/uni-app";
	import gameBox from "./gameBox.vue"
	import utils from "/pages/utils/index.js"
	import {
		checkLogin
	} from "@/pages/components/checkLogin.js";
	components: {
		gameBox
	}
	
	let ENV = ref("");
	let message = ref(null)
	let msgType = ref("warn")
	let messageText = ref("")
	let gameContentBox = ref(null)
	let sum = ref(0)
	let initArr = ref([])
	let isDone = ref(false)
	let hasDone = ref(false)

	onReady(() => {
		if (!uni.getStorageSync("uni_id_token")) {
			checkLogin();
		}
	})

	onShow(async () => {
		//获取看看有没有存的数据  如果有  取出来赋值给initArr
		ENV.value = inject("ENV")
		if (ENV.value === "develop") {
			//TODO 走初始化
			isDone.value = true
		} else {
			isDone.value = false
			if (uni.getStorageSync("uni_id_token")) {
				if (!hasDone.value) {
					let id = uni.getStorageSync("uni-id-pages-userInfo")._id
					await utils.requestCloudDB("get", {
						collection: "GAME_2048_TAB",
						whereParam: {
							userId: id
						},
						limitParam: 1
					}, (res) => {
						if (res.data) {
							let data = res.data
							let arr = data[0].valueArr
							initArr.value = arr
							hasDone.value = true
						}
					})
				}
			}
			isDone.value = true
		}
	})

	const getSum = (val) => {
		sum.value = val
	}
	const backspace = () => {
		if (!gameContentBox.value.backspace()) {
			messageText.value = "走一下啊,不走怎么撤回啊"
			message.value.open()
		}
	}
	const saveArr = () => {
		if (ENV.value === "develop") {} else {
			if (uni.getStorageSync("uni_id_token")) {
				gameContentBox.value.saveData()
			} else {
				checkLogin();
			}
		}
	}
</script>

<style scoped>
	.content-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.stage-prop {
		width: calc(100% - 40rpx);
		height: 150rpx;
		margin: 100rpx 20rpx 0 20rpx;
		border: 1rpx solid #ccc;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.propsClass {
		padding: 10rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #ccc;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}

	.loading {
		height: 90vw;
		width: 90vw;
		border: 1rpx solid #ccc;
		box-sizing: border-box;
		position: relative;
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-transition: opacity .3s;
	}

	.loading::after {
		content: '';
		position: absolute;
		z-index: 1;
		background: url("../../../../static/loading.gif");
		background-size: contain;
		top: 0;
		right: 0;
		width: 50%;
		height: 50%;
		transform: translate(-50%, 50%);
	}
</style>